<!-- 分类商品列表页 -->
<template>
	<view class="page" :style="{ '--color': color }">
		<backTop v-if="toTop"></backTop>
		<!-- back='0' -->
		<status-bar :back="back" :title="back != 0 ? className : tabTitle"></status-bar>
		<view class="content" :style="{ 'padding-top': serchState ? '100rpx' : '160rpx' }">
			<view
				class="list-nav kite-fixed"
				:style="{ top: navHeight + System.statusBarHeight + 'px' }">
				<view class="mySearch flex-box align-center">
					<!-- <text class="iconfont icon-xiangzuo" @click="back()"></text> -->
					<navigator
						class="navigator-search flex-box align-center flex"
						url="../classify/search">
						<text class="iconfont icon-btn_search"></text>
						<text class="txt1" v-if="name">{{ name }}</text>
						<text class="txt" v-else>输入搜索关键词</text>
					</navigator>
					<text class="cancel-txt" @click="back()" v-if="serchState">取消</text>
				</view>
				<view v-if="!serchState" class="tab-list flex-box align-center flex-between">
					<view
						class="tab-item"
						@click="checkTab = !checkTab"
						:class="{ thmeColor: type != 4 && type != 2 }"
						:style="{ '--color': color }">
						<text class="name">
							<template v-if="!leftType">综合</template>
							<template v-if="leftType == 5">新品</template>
							<template v-if="leftType == 3">热度</template>
							<template v-if="leftType == 1 && state == 1">升序</template>
							<template v-if="leftType == 1 && state == 2">降序</template>
						</text>
						<text v-if="checkTab" class="icon-shangsanjiaoxing iconfont"></text>
						<text v-else class="icon-xiasanjiaoxing iconfont"></text>
					</view>
					<view
						class="tab-item"
						:class="{ thmeColor: type == 2 }"
						@click="navClick(2, 1)">
						<text class="name">销量</text>
					</view>
					<view
						class="tab-item"
						:class="{ thmeColor: type == 4 }"
						@click="navClick(4, 1)">
						<text class="name">好评</text>
					</view>
					<view
						class="tab-item list-btn"
						@click="toggleCss"
						v-if="bid != 'eYiDtKWz6Qhv_bWnBJ7Knw=='">
						<text v-if="togClass" class="iconfont icon-liebiao4"></text>
						<text v-else class="iconfont icon-liebiao"></text>
					</view>

					<view class="tab-item" @click="checkScreen = true">
						<text class="name">筛选</text>
						<text class="iconfont icon-shaixuan"></text>
					</view>
				</view>

				<view class="c-list" :class="{ active: checkTab }">
					<view
						class="c-item flex-box flex-between"
						:class="{ thmeColor: !type }"
						@click="navClick('', 1)">
						<text class="name">综合</text>
						<text class="iconfont icon-xuanzhong thmeColor"></text>
					</view>
					<view
						class="c-item flex-box flex-between"
						:class="{ thmeColor: type == 5 }"
						@click="navClick(5, 1)">
						<text class="name">新品</text>
						<text class="iconfont icon-xuanzhong thmeColor"></text>
					</view>
					<view
						class="c-item flex-box flex-between"
						:class="{ thmeColor: type == 3 }"
						@click="navClick(3, 1)">
						<text class="name">热度</text>
						<text class="iconfont icon-xuanzhong thmeColor"></text>
					</view>
					<view
						class="c-item flex-box flex-between"
						:class="{ thmeColor: type == 1 && state == 1 }"
						@click="navClick(1, 1)">
						<text class="name">价格升序</text>
						<text class="iconfont icon-xuanzhong thmeColor"></text>
					</view>
					<view
						class="c-item flex-box flex-between"
						:class="{ thmeColor: type == 1 && state == 2 }"
						@click="navClick(1, 2)">
						<text class="name">价格降序</text>
						<text class="iconfont icon-xuanzhong thmeColor"></text>
					</view>
				</view>
			</view>
			<view class="mask" v-if="checkTab" @click="checkTab = false"></view>

			<!-- 筛选、二级分类 -->
			<view class="mask mask-screen" v-if="checkScreen" @click="checkScreen = false">
				<view
					class="classify2"
					:style="{ 'padding-top': navHeight + System.statusBarHeight + 'px' }"
					@click.stop>
					<view class="close-box flex-box align-center" @click="checkScreen = false">
						<text class="iconfont icon-guanbi1"></text>
					</view>
					<view class="flex" style="overflow: hidden auto">
						<template v-if="promotionType">
							<view class="list-title">促销</view>
							<view class="list">
								<view
									v-for="(item, i) in promotionType"
									:key="i"
									@click="chkAct(item.type, item.id)"
									:class="currAct == item.type ? 'thmeBg' : ''"
									class="txt"
									>{{ item.name }}</view
								>
								<!-- <view @click="chkAct(2)"  :class="currAct == 2?'thmeBg':''" class="txt">团购</view> -->
							</view>
						</template>

						<view class="list-title">价格区间</view>
						<view class="list price-chk flex-box">
							<view class="txt flex">
								<input
									type="number"
									v-model="priceMin"
									confirm-type="done"
									@confirm="confirm"
									placeholder="最低价格" />
							</view>
							<view class="mid"></view>
							<view class="txt flex">
								<input
									type="number"
									v-model="priceMax"
									confirm-type="done"
									@confirm="confirm"
									placeholder="最高价格" />
							</view>
						</view>
						<view class="list-title">分类</view>
						<view class="list">
							<view
								@click="chkClassify(item.id)"
								:class="currClaID == item.id ? 'thmeBg' : ''"
								v-for="(item, index) in classifyData"
								:key="index"
								class="txt"
								>{{ item.name }}</view
							>
						</view>
						<!-- 商品品牌 -->
						<template v-if="brand.goods && brand.goods.list">
							<view class="list-title">{{ brand.goods.name }}</view>
							<view class="list">
								<view
									@click="chkBand(item.id, 1)"
									:class="goodsBrandID == item.id ? 'thmeBg' : ''"
									v-for="(item, index) in brand.goods.list"
									:key="index"
									class="txt"
									>{{ item.title }}</view
								>
							</view>
						</template>
						<!-- 店铺品牌 -->
						<template v-if="brand.store && brand.store.list">
							<view class="list-title">{{ brand.store.name }}</view>
							<view class="list">
								<view
									@click="chkBand(item.id, 2)"
									:class="storeBrandID == item.id ? 'thmeBg' : ''"
									v-for="(item, index) in brand.store.list"
									:key="index"
									class="txt"
									>{{ item.title }}</view
								>
							</view>
						</template>
					</view>
					<view class="btns flex-box">
						<view @click="reset(1)">重置</view>
						<view class="thmeBg" @click="reset(2)">确定</view>
					</view>
				</view>
			</view>

			<!-- 商品 -->
			<view class="goodsContent" v-if="goods && goods.length > 0">
				<view class="whitebor" v-show="togClass">
					<GoodsList
						hot="1"
						positionshow="1"
						v-show="goods && goods.length > 0"
						:goodsData="goods"
						type="1"></GoodsList>
					<view class="DiLine" v-if="showLine">-------- 我也是有底线的 --------</view>
				</view>
				<view v-show="!togClass" style="background-color: #ffffff">
					<GoodsList
						hot="1"
						positionshow="1"
						v-show="goods && goods.length > 0"
						:goodsData="goods"
						type="2"></GoodsList>
					<view class="DiLine" v-if="showLine">-------- 我也是有底线的 --------</view>
				</view>
			</view>
			<empty type="1" v-if="noData" cat="4" msg="还没有相关商品哦~"></empty>
		</view>

		<tabBar :tab="12" v-if="back == 0"></tabBar>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	var that;
	import GoodsList from '../../components/goodsList.vue';
	export default {
		components: {
			GoodsList,
		},
		data() {
			return {
				back: 1,
				toTop: false,
				togClass: true,
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				name: '',
				goods: [],
				className: '',
				classifyId: '',
				pageNum: 10,

				state: 1,
				page: 1,
				noData: false,
				classifyData: '', // 分类信息
				currClaID: '',
				more: false, // 是否加载更多
				type: '',
				leftType: '',
				serchState: false, // 搜索状态 不显示顶部导航栏
				showLine: false,
				title: '',
				checkTab: false,
				checkScreen: false,
				currAct: '', // 促销类型
				priceMin: '', // 最低区间
				priceMax: '', // 最高价格
				goodsBrandID: '', // 商品品牌
				storeBrandID: '', // 店铺品牌
				brand: '', //品牌
				firstClassifyId: '', //默认分类id
				loading: true,
				promotionType: '', // 促销
			};
		},

		onLoad(option) {
			console.log(option, 'log');
			that = this;
			that.goods = [];
			if (option.classId != undefined) {
				that.classifyId = option.classId;
				that.firstClassifyId = option.classId;
			}
			if (option.back) that.back = option.back;
			if (option.name) that.name = option.name;
			if (option.className) that.className = option.className;
			// that.getsearchGoods();
			that.getClassify();
			that.dataInit();
		},

		methods: {
			reset(type) {
				if (type == 1) {
					// 重置
					that.currAct = ''; // 促销类型
					that.priceMax = ''; // 促销类型
					that.priceMin = ''; // 促销类型
					that.goodsBrandID = ''; // 促销类型
					that.storeBrandID = ''; // 促销类型
					that.currClaID = '';
					that.classifyId = that.firstClassifyId;
					that.dataInit();
				} else {
					that.checkScreen = false;
					that.dataInit();
				}
			},
			chkBand(id, type) {
				if (type == 1) {
					// 商品品牌
					that.goodsBrandID = that.goodsBrandID == id ? '' : id;
				}
				if (type == 2) {
					// 店铺品牌
					that.storeBrandID = that.storeBrandID == id ? '' : id;
				}
				that.dataInit();
			},
			getsearchGoods() {
				that.noData = false;
				that.$http
					.post({
						url: '/singleSaleApi/searchGoods',
						data: {
							b_id: that.bid,
							title: that.name,
							classify_id: that.classifyId,
						},
					})
					.then((res) => {
						if (res.errcode == 100) {
							that.goods = res.data;
						}
						if (that.goods.length < 1) {
							that.noData = true;
						}
						if (that.goods.length > 5) {
							that.showLine = true;
						}
					});
			},
			chkAct(type, id) {
				if (type == '999') {
					that.currClaID = '';
					that.classifyId = id;
				} else {
					that.promotionType.forEach((item) => {
						// 点了同级分类的id后 切换需清空id
						if (that.classifyId == item.id) {
							that.currClaID = '';
							that.classifyId = '';
						}
					});
				}
				that.currAct = that.currAct == type ? '' : type;
				that.dataInit();
			},
			confirm(e) {
				if (that.priceMin > that.priceMax) {
					let max = that.priceMax;
					that.priceMax = that.priceMin;
					that.priceMin = max;
				}
				that.dataInit();
			},
			dataInit() {
				uni.showLoading({
					mask: false,
					title: '正在加载',
				});
				that.page = 1;
				that.goods = [];
				that.goodsSort();
			},
			chkClassify(id) {
				// 切换分类
				if (that.currClaID != id) {
					that.currClaID = id;
					that.classifyId = id;
					that.dataInit();
				} else {
					that.currClaID = '';
					that.classifyId = that.firstClassifyId;
					that.dataInit();
				}
			},
			getClassify() {
				// 获取二级、同级分类
				that.$http
					.post({
						url: '/singleSaleApi/getClassify',
						data: {
							classify_id: that.classifyId,
						},
					})
					.then((res) => {
						if (res.data) {
							if (res.data.brand) that.brand = res.data.brand;
							if (res.data.promotionType) that.promotionType = res.data.promotionType;
							if (res.data.lowerClass) {
								// that.currClaID = res.data.lowerClass[0].id;
								that.classifyData = res.data.lowerClass;
							} else {
								that.classifyData = res.data.peerClass;
								that.currClaID = that.classifyId;
							}
						}
						that.loading = false;
					});
			},
			navClick: function (type, state) {
				that.type = type;
				if (type != 4 && type != 2) {
					that.leftType = type;
				}
				that.showLine = false;
				setTimeout(() => {
					that.checkTab = false;
				}, 200);
				that.state = state;
				that.dataInit();
			},
			goodsSort: function () {
				that.noData = false;
				that.more = false;
				that.showLine = false;
				that.$http
					.post({
						url: '/singleSaleApi/sortClassGoods',
						data: {
							name: that.name,

							type: that.type,
							state: that.state,
							page: that.page,
							pageNum: that.pageNum,
							classify_id: that.classifyId,

							actType: that.currAct == '999' ? '' : that.currAct, // 促销类型
							priceMax: that.priceMax, // 最高价格
							priceMin: that.priceMin, // 最低价格
							goodsBrandID: that.goodsBrandID, // 商品品牌
							storeBrandID: that.storeBrandID, // 店铺品牌
						},
					})
					.then((res) => {
						if (res.code == 100 && res.data.DataArr) {
							that.goods = that.goods.concat(res.data.DataArr);
							if (res.data.DataArr.length >= that.pageNum) {
								that.more = true;
								that.page++;
							}
						}
						if (that.goods.length < 1) {
							that.noData = true;
						}
						if (
							that.goods.length > 5 &&
							(!res.data || res.data.DataArr.length < that.pageNum)
						) {
							that.showLine = true;
						}
						uni.hideLoading();
					});
			},
			toggleCss: function () {
				that.togClass = !that.togClass;
				that.page = 1;
				that.goods = [];
				that.goodsSort();
			},
		},
		computed: {
			...mapState([
				'color',
				'System',
				'navHeight',
				'vid',
				'nameDefinition',
				'share',
				'bid',
				'tabTitle',
			]),
		},
		onShareAppMessage(option) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: '/pages/index/index?share_v_id=' + this.vid,
				imageUrl: share.imageUrl,
			};
		},
		onReachBottom() {
			if (that.more) {
				that.goodsSort();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				that.toTop = true;
			} else {
				that.toTop = false;
			}
		},
	};
</script>

<style scoped lang="scss">
	.goodsContent {
		padding-top: 10rpx;
	}
	.mask {
		z-index: 90;
		transition: all 0.2s;
		overflow: hidden;
	}
	.list-nav {
		z-index: 100;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background-color: #ffffff;
		padding-top: 16rpx;
		box-sizing: border-box;
		.mySearch {
			border-radius: 30rpx;
			margin-bottom: 16rpx;
			padding: 0 $uni-page-space;
			.icon-xiangzuo {
				font-size: 40rpx;
				font-weight: 400;
				margin-right: 20rpx;
				color: #999999;
			}
			.navigator-search {
				border: 1px solid #f2f2f2;
				height: 56rpx;
				border-radius: 56rpx;
				.icon-btn_search {
					color: #cdcdcd;
					font-size: 34rpx;
					font-weight: normal;
					margin-left: 12rpx;
				}
				.txt {
					color: #999999;
					margin-left: 10rpx;
				}
				.txt1 {
					color: #333333;
					margin-left: 10rpx;
				}
			}
			.cancel-txt {
				font-size: 26rpx;
				padding-left: 20rpx;
			}
		}
		.tab-list {
			height: 80rpx;
			padding-bottom: 20rpx;
			justify-content: space-around;
			.tab-item {
				color: #333333;
				// &:nth-child(1){
				// 	width: 150rpx;
				// }
				.name {
					font-size: 28rpx;
					color: inherit;
					margin-right: 6rpx;
				}
				.icon-shangsanjiaoxing,
				.icon-xiasanjiaoxing {
					font-size: 20rpx;
					color: inherit;
				}
				.icon-shaixuan {
					font-weight: bold;
					font-size: 22rpx;
				}
			}
			.list-btn {
				.iconfont {
					font-size: 40rpx;
					color: #333333;
				}
			}
		}
		.c-list {
			background-color: #fafafa;
			height: 0;
			overflow: hidden;
			transition: height 0.2s;
			&.active {
				height: 406rpx;
			}
			.c-item {
				padding: 0 $uni-page-space;
				line-height: 80rpx;
				height: 80rpx;
				border-bottom: 1px solid #f2f2f2;
				color: #333333;
				.name {
					font-size: 28rpx;
					color: inherit;
				}
				.iconfont {
					display: none;
					font-size: 34rpx;
				}
				&.thmeColor {
					.iconfont {
						display: inline-block;
					}
				}
				&:nth-last-of-type(1) {
					border: none;
				}
			}
		}
	}

	.mask-screen {
		z-index: 108;
		overflow: hidden;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		.classify2 {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 500rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			.list-title {
				font-size: 26rpx;
				font-weight: 700;
				padding: 10rpx $uni-page-space;
			}
			@keyframes show {
				0% {
					right: -500rpx;
				}
				100% {
					right: 0;
				}
			}
			animation: show 0.2s linear;
			.close-box {
				height: 70rpx;
				padding-right: $uni-page-space;
				justify-content: flex-end;
				.icon-guanbi1 {
					font-size: 30rpx;
				}
			}
			.list {
				flex: 1;
				overflow-y: auto;
				padding: 10rpx $uni-page-space;
				margin-right: -20rpx;
				margin-top: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				.txt {
					display: inline-block;
					color: #666666;
					padding: 0 20rpx;
					margin: 0 20rpx 20rpx 0;
					line-height: 50rpx;
					background-color: #eeeeee;
					border-radius: 40rpx;
				}
				.thmeBg {
					color: #ffffff;
				}
			}
			.price-chk {
				align-items: center;
				view {
					text-align: center;
					input {
						height: 50rpx;
						line-height: 50rpx;
					}
				}

				.mid {
					height: 1px;
					width: 24rpx;
					margin: 0 20rpx 20rpx 0;
					background-color: #eeeeee;
				}
			}
			.btns {
				height: 120rpx;
				padding: 0 20rpx;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #eeeeee;
				view {
					line-height: 56rpx;
					flex: 1;
					text-align: center;
					border-radius: 56rpx;
					margin: 0 20rpx;
					&:nth-child(1) {
						border: 1px solid #eeeeee;
						color: #333333;
					}
					&:nth-child(2) {
						color: white;
					}
				}
			}
		}
	}
</style>
